Components Layer

The components layer contains reusable UI components

Details

• 📁 Absolute Path: @c
• 📁 Folder Location: src/components

Layer Import and Usage Rules

Action	base	components	libs	modules	views	app	services
📥 Can Import From	✅	✅	❌	❌	❌	❌	❌
📤 Can Export To	❌	✅	❌	✅	✅	✅	❌

Key:

• ✅ Allowed: The layer can import from or export to the specified layer.
• ❌ Not Allowed: The layer cannot import from or export to the specified layer.

---

The components layer contains reusable UI components that are shared across the project. These components are independent and can be used in modules and views , app layers of the application. The components layer is responsible for defining the visual elements of the application, such as buttons, forms, modals, and more.

1. Purpose of the components Layer

The components layer is responsible for:

• Providing reusable UI components that are used across the entire project.
• Ensuring consistency in design and behavior.
• Reducing code duplication by centralizing shared UI elements.
• Supporting customization through props and theming.

---

2. Structure of the components Layer

Small Project

   src/
   └── components/
       ├── Button.tsx          # Button component
       ├── Input.tsx           # Input component
       ├── Card.tsx            # Card component
       ├── Modal.tsx           # Modal component
       ├── Navbar.tsx          # Navbar component

Large Project

        src/
        └── components/
            ├── Input/                  # Common components
            |   ├── TextInput.tsx       # Input component
            |   ├── Select.tsx          # Select component
            |   ├── Checkbox.tsx        # Checkbox component
            |   ├── Radio.tsx           # Radio component
            |   ├── input.module.css    # Input styles
            |   ├── types.ts            # Input types
            |   ├── model.ts            # Input model
            |   ├── Switch/
            |   |   ├── index.tsx       # Switch component
            |   |   ├── Switch.test.tsx # Switch test file
            |   ├── ...                 # Other common components
            ├── Button/                 # Button components
            |   ├── Button.tsx          # Button component
            |   ├── IconButton.tsx      # IconButton component
            ├── Card/                   # Card components
            |   ├── Card.tsx            # Card component
            |   ├── CardHeader.tsx      # CardHeader component
            ├── Modal/                  # Modal components
            |   ├── Modal.tsx           # Modal component
            |   ├── ModalHeader.tsx     # ModalHeader component
            ├── Navbar/                 # Navbar components
            |   ├── Navbar.tsx          # Navbar component
            |   ├── NavItem.tsx         # NavItem component
            └── ...                     # Other components

3. Usage of the components Layer

The components layer can be used to define reusable UI components that are shared across the entire project. It is independent and can be imported.

src/components/Button.tsx

import React from "react";
import styles from "./Button.module.css";
import { ButtonTypes } from "./types";

const button = (props: ButtonTypes) => {
    return <button className={styles.button}>Click Me</button>;
}

export default button;

src/app/index.tsx

import { button } from "@c/Button";

function App() {
    return (
        <div>
            <Button/>
        </div>
    );
}

---

4. Files in the components Layer

The components layer contains the following files:

• the UI-specific components like Tabs, Dropdown, Accordion, etc.
• common components like TextInput, Select, Checkbox, Radio, etc.